<template>
  <div class="map" id="map"></div>
</template>
<script setup lang="ts">
import Map from 'ol/Map.js'
import View from 'ol/View.js'
import OSM from 'ol/source/OSM.js'
import TileLayer from 'ol/layer/Tile.js'
import { onMounted } from 'vue'
const init = () => {
  const map = new Map({
    layers: [new TileLayer({ source: new OSM() })],
    view: new View({
      center: [0, 0],
      zoom: 2
    }),
    target: 'map'
  })
}
onMounted(() => {
  init()
})
</script>
<style lang="less" scoped>
.map {
  width: 100vw;
  height: 100vh;
}
</style>
